<template>
	<view>
		<custom-header bgColor="#F75F57" borderColor="#F75F57" white title="提现" />
		<view class="header">
			<view class="title">可提现金额（元）</view>
			<view class="value">
				<text class="icon">￥</text>
				<text class="balance">{{ balance }}</text>
			</view>
		</view>
		<view class="_wrap">
			<view class="wi_wrap">
				<view class="title">提现金额</view>
				<view class="intput_wrap">
					<view class="icon">￥</view>
					<view class="input">
						<input type="digit" v-model="money" @input="onInput" placeholder="输入金额" placeholder-style="font-size:48rpx;" />
					</view>
					<view class="text_btn" @click="handleAll">全部提现</view>
				</view>
				<view class="bank_card">
					<view class="label">提现至</view>
					<view class="value" v-if="bankCard">
						<view class="text">
							{{ bankCard }}
						</view>
						<view class="icon">
							<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/wallet/unionpay_icon.png" mode=""></image>
						</view>
					</view>
					<view class="value" v-else>
						<view class="text">
							未绑定银行卡，
						</view>
						<view class="text_btn" hover-class="custom_hover" :hover-stay-time="200">
							立即绑定
						</view>
					</view>
				</view>
				<view 
					class="btn"
					 :class="{'btn_disable':!money}"
					hover-class="confirm_hover" 
					:hover-stay-time="200"
					>申请提现</view>
			</view>
			<view class="wi_hint">
				<view class="text">温馨提示</view>
				<view class="text">到账金额=提现金额-提现手续费（0
				<view class="text">到账金额=提现金额-提现手续费（0.5元/次）</view>
				<view class="text">平台提现预计2小时到账，认证所提交信息，为支付金融支付验证使用，请认真核实填写。本平台禁止一切恶意套现行为，一经发现将余额冻结处理。</view></view>
				<view class="text">该规则不含违法违规相关内容及行为，未尽事宜可咨询平台在线客服。</view>
				<view class="text">最终解释权归本平台所有。</view>
			</view>
			<view class="bottom_btn">
				<view 
					class="btn" 
					hover-class="custom_hover" 
					:hover-stay-time="200"
					@click="handleUnbundle">解绑银行卡</view>
			</view>
		</view>
		<!-- 自定义确认弹出层 -->
		<custom-popup 
			:show="isShowPopup" 
			:config="popupConfig"
			@cancel="isShowPopup = false" 
			@confirm="handlePopupConfirm">
		</custom-popup>
		<!-- 自定义消息弹出层 -->
		<custom-popup
			:show="isShowToast" 
			:config="popupConfig"
			@confirm="isShowToast = false">
		</custom-popup>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	
	// 余额
	const balance = ref(998.88)
	// 银行卡
	const bankCard = ref('建设银行')
	// const bankCard = ref('')
	// 提现金额
	const money = ref(null)
	
	const onInput = (e)=>{
		const { value } = e.detail
		if(Number(value) && Number(value) > 0){
			if(Number(value) > balance.value){
				money.value = balance.value
			}
		}else{
			money.value = 0
		}
	}
	
	// 全部提现
	const handleAll = ()=>{
		money.value = balance.value
		console.log(money.value)
	}
	
	// 弹窗提示
	const isShowToast = ref(false)
	const isShowPopup = ref(false)
	const popupConfig  = ref({})
	
	// 银行卡解绑
	const handleUnbundle = ()=>{
		console.log('银行卡解绑')
		isShowPopup.value = true
		popupConfig.value = {
			message:'确定解除银行卡绑定吗？',
			showCancel:true,
		}
	}
	// 确认
	const handlePopupConfirm = (data)=>{
		setTimeout(()=>{
			isShowPopup.value = false
			isShowToast.value = true
			popupConfig.value = {
				message:'银行卡已解除绑定'
			}
		},1000)
	}
	
	
</script>

<style lang="scss">
	.header{
		background: #F75F57;
		height: 320rpx;
		color: #fff;
		font-weight: bold;
		font-size: 32rpx;
		padding: 0 50rpx;
		.title{
			padding-top: 30rpx;
		}
		.value{
			padding-top: 20rpx;
			.balance{
				font-size: 60rpx;
			}
		}
	}
	._wrap{
		padding: 0 20rpx;
		transform: translateY(-120rpx);
		.wi_wrap{
			// height: 440rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 27rpx rgba(5,5,5,0.1);
			padding: 30rpx 30rpx 40rpx;
			.title{
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
			}
			.intput_wrap{
				display: flex;
				align-items: center;
				padding:20rpx 0;
				border-bottom: 1rpx solid #F7F7F7;
				.icon{
					font-size: 64rpx;
					color: #333;
					width: 70rpx;
				}
				.input{
					flex: 1;
					input{
						color: #333;
						font-size: 64rpx;
						height: 100rpx;
						max-width: 100%;
					}
				}
				.text_btn{
					font-size: 28rpx;
					color: #F5564D;
					width: 120rpx;
				}
			}
			.bank_card{
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				padding: 30rpx 0;
				.label{
					color: #333;
				}
				.value{
					display: flex;
					align-items: center;
					.text{
						color: #666;
					}
					.icon{
						width: 64rpx;
						height:40rpx;
						display: flex;
						margin-left: 10rpx;
					}
					.text_btn{
						font-size: 28rpx;
						color: #F5564D;
					}
				}
			}
			.btn{
				height: 89rpx;
				line-height: 89rpx;
				text-align: center;
				border-radius: 99rpx;
				background: #F5564D;
				color: #fff;
				font-size: 32rpx;
				margin-top: 40rpx;
			}
		}
		.wi_hint{
			font-size: 28rpx;
			color: #999;
			padding-top: 30rpx;
			.text{
				padding-top: 5rpx;
				text-align: justify;
			}
		}
	}
	.bottom_btn{
		display: flex;
		justify-content: center;
		padding: 50rpx 0 0;
		font-size: 28rpx;
		color: #F5564D;
	}
</style>
